<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<style>

	.bar {
	    height: 20px;
	    background: green;
	}
	
</style>
</head>
<body>
<input id="fileupload" type="file" name="fileAllegato" multiple>
<br>
<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>
<div id="result">?</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>

$(function () {
    
    $('#fileupload').fileupload({
        url: '/opencms/esf/upload/addAjax.action',
        sequentialUploads: true,
        dataType: 'json',
        done: function (e, data) {
            //alert(JSON.stringify(data.result));
            var status = data.result.status;
            switch (status){
            	case 'SUCCESS' :
                	$("#result").html(data.result.filename);
                	break;
            	case 'ERROR':
            	    $('#progress .bar').css('width',0);
            	    $("#result").html(data.result.error);
            	    break;
            }   
            /*
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
            */
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%' );
        },
        change:  function (e, data) {
            /*
            alert("change"); 
            $('#progress .bar').css('width',0);
            */
        }
    });
    
});
</script>
</body> 
</html>